#page-4 {
	background: rgb(255, 255, 255);
}
.page4-inner {
	margin: 0px auto 30px; width: 540px; height: 540px; position: relative;
}
.page4-inner h2 {
	margin: 0px auto; top: 180px; width: 280px; text-align: center; font-size: 40px; position: relative; z-index: 5; cursor: pointer; opacity: 0;
}
.page4-circle {
	transition:1.5s ease-in-out; left: 0px; top: 0px; width: 100%; height: 100%; position: absolute; z-index: 3; opacity: 0; transform: rotate(-400deg); -moz-transition: all 1.5s ease-in-out 0; -webkit-transition: all 1.5s ease-in-out 0; -o-transition: all 1.5s ease-in-out 0; -webkit-transform: rotate(-400deg); -moz-transform: rotate(-400deg); -o-transform: rotate(-400deg);
}
.page4-circle .arrow {
	transition:0.5s; top: 0px; text-indent: -9999px; position: absolute; z-index: 1; cursor: pointer; background-image: url("../images/p4.png"); background-repeat: no-repeat; -webkit-transition: all .5s;
}
.page4-shadow .arrow {
	transition:0.5s; top: 0px; text-indent: -9999px; position: absolute; z-index: 1; cursor: pointer; background-image: url("../images/p4.png"); background-repeat: no-repeat; -webkit-transition: all .5s;
}
.page4-circle .arrow-1 {
	background-position: 0px 0px; left: 105px; width: 405px; height: 177px;
}
.page4-circle .arrow-1:hover {
	top: -20px;
}
.page4-circle .shadow-1 {
	background-position: 0px -177px; left: 105px; width: 405px; height: 177px; z-index: 0;
}
.page4-circle .arrow-2 {
	background-position: 0px -764px; left: 210px; top: 165px; width: 309px; height: 351px;
}
.page4-circle .arrow-2:hover {
	left: 230px;
}
.page4-circle .shadow-2 {
	background-position: -314px -762px; left: 210px; top: 165px; width: 309px; height: 351px; z-index: 0;
}
.page4-circle .arrow-3 {
	background-position: 0px -356px; left: 0px; top: 70px; width: 278px; height: 402px;
}
.page4-circle .arrow-3:hover {
	left: -20px;
}
.page4-circle .shadow-3 {
	background-position: -278px -356px; left: 0px; top: 70px; width: 278px; height: 402px; z-index: 0;
}
.page4-desc {
	top: 0px; width: 370px; height: 60px; color: rgb(163, 163, 163); line-height: 26px; font-size: 22px; position: absolute; z-index: 1; cursor: pointer; opacity: 0;
}
.page4-desc p {
	transition:0.3s; top: 0px; line-height: 32px; position: relative; -webkit-transition: all .3s;
}
.page4-desc .thumnail {
	background: rgb(255, 255, 255); padding: 8px; border-radius: 5px; border: 1px solid rgb(238, 238, 238); border-image: none; width: 252px; position: relative; opacity: 0; box-shadow: 0px 2px 6px rgba(0,0,0,0.4);
}
.page4-desc .thumnail img {
	width: 100%;
}
.page4-desc .thumnail h4 {
	height: 20px; color: rgb(51, 51, 51); line-height: 20px; font-size: 16px;
}
.page4-desc .thumnail h5 {
	height: 20px; line-height: 20px; font-size: 14px;
}
.page4-desc .line {
	height: 34px; background-image: url("../images/p4-hover2.png"); background-repeat: no-repeat;
}
.page4-desc1 .line {
	background-position: 0px 0px;
}
.page4-desc2 .line {
	background-position: 0px -311px;
}
.page4-desc3 .line {
	background-position: 0px -641px; margin-top: -20px;
}
.page4-desc4 .line {
	background-position: 0px -924px; margin-top: -20px;
}
.page4-desc1 {
	left: -220px;
}
.page4-desc1-animate {
	transition:0.5s; left: -290px; opacity: 1; -webkit-transition: all .5s;
}
.page4-desc2 {
	left: 500px; text-align: right;
}
.page4-desc2-animate {
	transition:0.5s; left: 480px; opacity: 1; -webkit-transition: all .5s;
}
.page4-desc3 {
	left: 500px; top: 340px; text-align: right;
}
.page4-desc3-animate {
	transition:0.5s; left: 480px; opacity: 1; -webkit-transition: all .5s;
}
.page4-desc4 {
	left: -220px; top: 340px;
}
.page4-desc4-animate {
	transition:0.5s; left: -290px; opacity: 1; -webkit-transition: all .5s;
}
.page4-article {
	margin: 0px auto; width: 900px; text-align: center; line-height: 26px; font-size: 20px;
}
.page4-loaded .page4-circle {
	opacity: 1; transform: rotate(0deg); -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0);
}
.page4-loaded .page4-inner h2 {
	transition:1s ease-in-out 0.8s; opacity: 1; -webkit-transition: all 1s ease-in-out .8s;
}
.page4-desc1 .thumnail {
	left: -90px; top: -200px;
}
.page4-desc4 .thumnail {
	left: -90px; top: -100px;
}
.page4-desc2 .thumnail {
	left: 140px; top: -200px;
}
.page4-desc3 .thumnail {
	left: 140px; top: -100px;
}
.page4-loaded .j_active_2 .thumnail {
	transition:opacity 0.4s; opacity: 1; -webkit-transition: opacity .4s;
}
.page4-loaded .j_active_2 .page4-desc p {
	transition:opacity 0.4s; opacity: 0; -webkit-transition: opacity .4s;
}
.page4-loaded .j_active_2 .page4-desc .line {
	transition:opacity 0.4s; opacity: 0; -webkit-transition: opacity .4s;
}
.page4-loaded .j_active_0 p {
	color: rgb(51, 51, 51); font-size: 24px;
}
.page4-loaded .j_active_1 p {
	color: rgb(51, 51, 51); font-size: 24px;
}
.page4-loaded .j_active_3 p {
	color: rgb(51, 51, 51); font-size: 24px;
}
.page4-loaded .j_active_0 .line {
	background-position: 0px -459px;
}
.page4-loaded .j_active_1 .line {
	background-position: 0px -785px;
}
.page4-loaded .j_active_3 .line {
	background-position: -55px -153px;
}
.p4-banner {
	margin-top: -220px;
}